feat(react): high-contrast syntax highlighting with light/dark pair - #162
Merged
RhysSullivan merged 3 commits intoApr 10, 2026
Merged
Conversation
The previous single Vitesse Dark theme was the same in both modes
and lacked contrast. Switch to GitHub Light/Dark as the default pair
and make the theme selectable at the component level.
- `lib/shiki.ts`: export `SupportedTheme`, `DEFAULT_LIGHT_THEME`,
`DEFAULT_DARK_THEME`, and a `ShikiThemeProp` that accepts either a
single theme or a `{ light, dark }` pair. Add `useIsDark` and
`useResolvedShikiTheme` hooks so components can react to the
system color-scheme. Load both GitHub themes up-front.
- `CodeBlock` and `ExpandableCodeBlock`: accept an optional `theme`
prop and pass it through the tokenization hooks.
- Streamdown plugin: key its cache per active theme so switching
color schemes doesn't serve stale tokens.
Move useIsDark into its own hook file so it can be reused outside of syntax highlighting. Also remove unused THEME export and vitesse-dark theme.
RhysSullivan
added a commit
that referenced
this pull request
May 31, 2026
…162) * feat(react): high-contrast syntax highlighting with light/dark pair The previous single Vitesse Dark theme was the same in both modes and lacked contrast. Switch to GitHub Light/Dark as the default pair and make the theme selectable at the component level. - `lib/shiki.ts`: export `SupportedTheme`, `DEFAULT_LIGHT_THEME`, `DEFAULT_DARK_THEME`, and a `ShikiThemeProp` that accepts either a single theme or a `{ light, dark }` pair. Add `useIsDark` and `useResolvedShikiTheme` hooks so components can react to the system color-scheme. Load both GitHub themes up-front. - `CodeBlock` and `ExpandableCodeBlock`: accept an optional `theme` prop and pass it through the tokenization hooks. - Streamdown plugin: key its cache per active theme so switching color schemes doesn't serve stale tokens. * refactor(react): extract useIsDark hook from shiki module Move useIsDark into its own hook file so it can be reused outside of syntax highlighting. Also remove unused THEME export and vitesse-dark theme. --------- Co-authored-by: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
vitesse-darktheme (used in both color schemes) with a GitHub Light/Dark pair.useIsDarkanduseResolvedShikiThemehooks so code blocks react to the system color scheme.themeprop on<CodeBlock>and<ExpandableCodeBlock>— callers can pass a single theme or a{ light, dark }pair.Changes
packages/react/src/lib/shiki.tspackages/react/src/components/code-block.tsxpackages/react/src/components/expandable-code-block.tsx